<template>
  <v-app>
    <app-navigation-drawer v-model="drawer" />

    <app-bar @toggle-drawer="drawer = !drawer" />

    <v-main>
      <v-container fluid class="pa-4">
        <router-view v-slot="{ Component }">
          <transition name="fade" mode="out-in">
            <component :is="Component" />
          </transition>
        </router-view>
      </v-container>
    </v-main>

  </v-app>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import AppBar from '@/components/navigation/AppBar.vue'
import AppNavigationDrawer from '@/components/navigation/AppNavigationDrawer.vue'

const drawer = ref(true)
</script>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>